<template>
  <div class="mapC">
    <div id="map"></div>
    <div class="tools" v-if="!mapLoading">
      <el-button icon="el-icon-edit" @click="drawPen">画笔</el-button>
      <el-button-group>
        <el-button @click="setLayers('wx')">卫星</el-button>
        <el-button @click="setLayers('jd')">街道</el-button>
        <el-button @click="clearItem">清除</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";

export default {
  watch: {
    city(val) {
      console.log(val);
      this.setCenter(val);
    },
    markers(val) {
      this.setMarkers();
    },
    center(val) {
      this.setCenter();
    },
  },
  props: {
    city: {
      type: String,
      default() {
        return "";
      },
    },
    markers: {
      type: Array,
      default() {
        return [];
      },
    },
    center: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      map: null,
      mapLoading: true,
      mouseTool: null,
      overlays: [],
      circle: null,
      layers: [],
      geoObj: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let _that = this;
      lazyAMapApiLoaderInstance.load().then(() => {
        // your code ...
        _that.map = new AMap.Map("map", {
          zoom: 14,
          zooms: [14, 18],
        });
        //卫星图层
        let satellite = new AMap.TileLayer.Satellite();
        let roadNet = new AMap.TileLayer.RoadNet();
        _that.layers = [satellite, roadNet];
        _that.map.on("complete", (ev) => {
          _that.mapLoading = false;
        });
        _that.mouseTool = new AMap.MouseTool(_that.map);
        _that.overlays = [];
        _that.mouseTool.on("draw", function (e) {
          _that.overlays = [e.obj];
          console.log(e.obj.getRadius()); //半径
          console.log(e.obj.getCenter()); //圆心
          _that.$emit("change", {
            center: e.obj.getCenter(),
            radius: e.obj.getRadius(),
          });
          _that.mouseTool.close(false);
        });
      });
    },
    drawPen() {
      this.mouseTool.close(true);
      this.circle = this.mouseTool.circle({
        fillOpacity: 0,
        fillColor: "#fff",
      });
    },
    clearItem() {
      this.overlays = [];
      this.mouseTool.close(true);
    },
    setLayers(type) {
      let layers = [];
      if (type == "wx") {
        layers.push(this.layers[0]);
      }
      if (type == "jd") {
        layers.push(this.layers[1]);
      }
      this.map.setLayers(layers);
    },
    setCenter() {
      if (this.mapLoading) {
        return false;
      }
      this.map.setCenter(this.center);
    },
    setMarkers() {
      this.map.clearMap();
      this.markers.map((item) => {
        let marker = new AMap.Text({
          text: item.label,
          map: this.map,
          position: item.position,
        });
        marker.setStyle({
          color: "#fff",
          background: "#2878FF",
          "border-radius": "5px",
          padding: "5px 10px",
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mapC {
  width: 100%;
  height: 600px;
  position: relative;
  #map {
    width: 100%;
    height: 100%;
  }
  .tools {
    position: absolute;
    top: 20px;
    right: 10px;
  }
}
</style>
